Combo Chart (কম্বো চার্ট) একাধিক চার্টের সংমিশ্রণ হতে পারে, যেমন একটি চার্টে Bar Chart এবং অন্যটিতে Line Chart একত্রে প্রদর্শন করা হয়। এটি খুবই উপকারী যখন আপনি একাধিক ভেরিয়েবলের মধ্যে সম্পর্ক এবং ট্রেন্ড দেখতে চান। Google Charts API তে Combo Chart তৈরি করা এবং বিভিন্ন Data Series যুক্ত করা খুবই সহজ।

এখানে, আমরা দেখব কিভাবে একটি Combo Chart তৈরি করা হয় এবং একাধিক Data Series যুক্ত করা হয়।

Step 1: Angular প্রজেক্ট এবং লাইব্রেরি ইন্সটল করা

প্রথমে, angular-google-charts লাইব্রেরি ইন্সটল করুন যদি আপনি ইতিমধ্যে এটি ইন্সটল না করে থাকেন:

npm install angular-google-charts

এটি ইনস্টল হওয়ার পর angular-google-charts প্যাকেজটি আপনার node_modules ফোল্ডারে যুক্ত হয়ে যাবে।

Step 2: GoogleChartsModule ইমপোর্ট করা

এখন, app.module.ts ফাইলে GoogleChartsModule ব্যবহার করতে এটি ইমপোর্ট করুন।

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { GoogleChartsModule } from 'angular-google-charts'; // GoogleChartsModule ইমপোর্ট

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    GoogleChartsModule // এখানে GoogleChartsModule যোগ করুন
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Step 3: Combo Chart তৈরি এবং Data Series যুক্ত করা

এখন আমরা একটি Combo Chart তৈরি করব, যেখানে একটি সিরিজ হবে Bar Chart এবং অন্য সিরিজ হবে Line Chart।

app.component.ts ফাইল:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Combo Chart with Multiple Data Series';

  chartType = 'ComboChart';  // Chart Type: ComboChart
  chartData = [
    ['Month', 'Sales', 'Expenses'],
    ['Jan', 1000, 400],
    ['Feb', 1170, 460],
    ['Mar', 660, 1120],
    ['Apr', 1030, 540]
  ];  // Data for combo chart

  chartOptions = {
    title: 'Sales and Expenses Comparison',
    vAxis: { title: 'Amount' },
    hAxis: { title: 'Month' },
    seriesType: 'bars',  // Set default series type as bar chart
    series: { 1: { type: 'line' } }  // Set second series (Expenses) as line chart
  };
}

app.component.html ফাইল:

<h1>{{ title }}</h1>

<!-- Google Combo Chart -->
<google-chart 
  [type]="chartType" 
  [data]="chartData" 
  [options]="chartOptions">
</google-chart>

ব্যাখ্যা:

• chartType এ 'ComboChart' ব্যবহার করা হয়েছে, যাতে একাধিক সিরিজ প্রদর্শন করা যায়।
• chartData তে দুটি ডেটা সিরিজ প্রদান করা হয়েছে: Sales এবং Expenses।
• chartOptions এ:
  • seriesType: 'bars' সেট করা হয়েছে, যাতে প্রথম সিরিজ (Sales) বার চার্ট হিসেবে প্রদর্শিত হয়।
  • series: { 1: { type: 'line' } } দ্বারা দ্বিতীয় সিরিজ (Expenses) কে Line Chart হিসেবে প্রদর্শন করা হচ্ছে।

Step 4: Combo Chart কাস্টমাইজেশন

এখন আপনি বিভিন্ন data series যোগ করতে এবং অন্যান্য কাস্টমাইজেশন অপশন ব্যবহার করতে পারেন। উদাহরণস্বরূপ, আপনি একাধিক সিরিজ তৈরি করতে পারেন, যেমন Bar এবং Line সিরিজ, অথবা একাধিক Line Series।

Data Series কাস্টমাইজেশন উদাহরণ:

chartOptions = {
  title: 'Sales and Expenses Comparison',
  vAxis: { title: 'Amount' },
  hAxis: { title: 'Month' },
  seriesType: 'bars', // Default series type
  series: {
    0: { type: 'line', color: 'blue' },  // First series (Sales) as Line
    1: { type: 'bars', color: 'green' }  // Second series (Expenses) as Bar
  }
};

এখানে, আমরা দুটি সিরিজ যোগ করেছি:

• প্রথম সিরিজ (Sales) Line Chart হিসেবে এবং এর রঙ blue সেট করেছি।
• দ্বিতীয় সিরিজ (Expenses) Bar Chart হিসেবে এবং এর রঙ green সেট করেছি।

Step 5: অ্যাপ্লিকেশন চালানো

এখন, Angular অ্যাপ্লিকেশনটি চালাতে নিচের কমান্ডটি ব্যবহার করুন:

ng serve

এটি ডিফল্টভাবে অ্যাপ্লিকেশনটি http://localhost:4200 এ রান করবে। আপনার ব্রাউজারে গিয়ে আপনি Combo Chart দেখতে পাবেন, যেখানে দুটি ভিন্ন ধরনের সিরিজ (Bar এবং Line) একসাথে প্রদর্শিত হবে।

Combo Chart এ আরও Data Series যোগ করা

এখন আপনি Combo Chart এ আরও Data Series যোগ করতে পারেন, যেমন একটি Stacked Bar Chart বা Area Chart সিরিজ। এটি সহজেই seriesType এবং series কাস্টমাইজেশন দিয়ে করা যায়।

উদাহরণ: আরও Data Series যোগ করা

chartData = [
  ['Month', 'Sales', 'Expenses', 'Profit'],
  ['Jan', 1000, 400, 600],
  ['Feb', 1170, 460, 710],
  ['Mar', 660, 1120, -460],
  ['Apr', 1030, 540, 490]
];

chartOptions = {
  title: 'Sales, Expenses and Profit Comparison',
  vAxis: { title: 'Amount' },
  hAxis: { title: 'Month' },
  seriesType: 'bars',
  series: {
    0: { type: 'line', color: 'blue' },  // Sales as line chart
    1: { type: 'bars', color: 'green' }, // Expenses as bar chart
    2: { type: 'area', color: 'red' }    // Profit as area chart
  }
};

এখানে, আমরা Profit সিরিজটি একটি Area Chart হিসেবে যোগ করেছি, এবং এটি Sales (line chart) এবং Expenses (bar chart) সিরিজের সাথে একটি Combo Chart তৈরি করেছে।

সারাংশ

Combo Chart একটি শক্তিশালী ভিজুয়াল টুল যা একাধিক চার্টের সংমিশ্রণ প্রদান করে। Google Charts API ব্যবহার করে আপনি সহজেই বিভিন্ন Data Series যোগ করতে পারেন, যেমন Bar, Line, এবং Area Chart। এই ফিচারটির সাহায্যে আপনি বিভিন্ন ভেরিয়েবলের মধ্যে সম্পর্ক এবং ট্রেন্ড দেখতে পারেন এবং আপনার ডেটা ভিজুয়ালাইজেশনকে আরও ইন্টারঅ্যাকটিভ ও কার্যকরী করতে পারেন। Angular অ্যাপ্লিকেশনে Combo Chart ব্যবহার করা খুবই সহজ এবং কাস্টমাইজেশন অপশন দিয়ে আপনি আপনার প্রয়োজন অনুযায়ী এটি তৈরি করতে পারেন।